<template>
    <div class="tmpl">
       <!--  顶部滚动条 -->
        <div class="mui-slider">
			<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
				<div class="mui-scroll">
					<a class="mui-control-item mui-active" @click="getList('0')">
						全部
					</a>
					<a v-for="item in cateList" class="mui-control-item" @click="getList(item.id)" :key=item.id>
						{{item.title}}
					</a>
				</div>
			</div>
		</div>
         <!--  图片列表 -->
        <div class="photoList">
			<ul>
				<li v-for="item in list" :key="item.id">
					<router-link v-bind="{to:'/photo/photoInfo/'+item.id}">
					<img v-lazy="item.img_url">
					<div class="desc">
						<h5 v-text="item.title"></h5>
						<p v-text="item.zhaiyao"></p>
					</div>
					</router-link>
				</li>
			</ul>
		</div>
    </div>
      
</template>
<script>
import common from "../../../statics/js/common.js";
import mui from "../../../statics/mui/js/mui.min.js";

export default {
  data() {
    return {
      cateList: [],
      list: []
    };
  },
  created() {
    this.getCateList();
    this.getList("0");
  },
  mounted() {
    //初始化滚动插件
    mui(".mui-scroll-wrapper").scroll({
      deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
    });
  },
  methods: {
    getList(cateid) {
      this.$http.get(common.domain + "/api/getimages/" + cateid).then(re => {
        if (re.body.status != "0") {
          this.$toast(re.body.message);
          return;
        }
        this.list = re.body.message;
      });
    },
    getCateList() {
      this.$http.get(common.domain + "/api/getimgcategory").then(re => {
        if (re.body.status != "0") {
          this.$toast(re.body.message);
          return;
        }
        this.cateList = re.body.message;
      });
    }
  }
};
</script>   
<style scoped>
/*实现图片列表样式*/
.photoList ul {
  padding-left: 0px;
}
.photoList li {
  list-style: none;
  position: relative;
  text-align: center
}
.photoList img {
  width: 100%;
  height: 300px;
}

.desc {
  width: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  position: absolute;
  bottom: 2px;
  left: 0px;
}

.desc h5 {
  color: #ffffff;
  font-weight: bold;
}
.desc p {
  color: #fff;
}

image[lazy="loading"] {
  width: 40px;
  height: 300px;
  margin: auto;
}
</style>

